import React, { Component } from "react";
import { SearchBar } from "antd-mobile";
import { Carousel } from "antd";
import axios from "axios";
const contentStyle = {
  height: "160px",
  color: "#fff",
  lineHeight: "160px",
  textAlign: "center",
  background: "#364d79",
};
class Homes extends Component {
  state = {
    link: [],
    cent: [],
  };
  componentDidMount() {
    axios({
      url: "/api/getlist",
      method: "post",
    }).then((res) => {
      console.log(res);
      this.setState({
        link: res.data.list,
      });
    });

    axios({
      url: "/api/getcent",
      method: "post",
    }).then((res) => {
      console.log(res);
      this.setState({
        cent: res.data.list,
      });
    });
  }
  render() {
    const { link,cent } = this.state;
    return (
      <div className="homes">
        <div className="header">
          <SearchBar
            placeholder="自动获取光标"
            ref={(ref) => (this.autoFocusInst = ref)}
          />
        </div>
        <div className="main">
          <Carousel autoplay>
            <div>
              <h3 style={contentStyle}>1</h3>
            </div>
            <div>
              <h3 style={contentStyle}>2</h3>
            </div>
            <div>
              <h3 style={contentStyle}>3</h3>
            </div>
            <div>
              <h3 style={contentStyle}>4</h3>
            </div>
          </Carousel>
          <div className="kin">
            {link.map((item, idx) => {
              return (
                <dl key={idx} className="line">
                  <dt>
                    <img src={item.img} alt="" />
                  </dt>
                  <dd>{item.title}</dd>
                </dl>
              );
            })}
          </div>

          <div className="maent">
            {
              cent.map((item,idx)=>{
                return <dl key={idx} className="minet">
                  <dt><img src={item.img} alt="" /></dt>
                  <dd>
                    <span>{item.title}</span>
                    <span>{item.word}</span>
                    <span className="kent">￥{item.money}</span>
                  </dd>
                </dl>
              })
            }
          </div>
        </div>
      </div>
    );
  }
}
export default Homes;
